export const code = `import React, { useState, useEffect, useRef } from "react";
import "./index.scss";
import CodeDisplayPage from "../../components/CodePreview";
import {code} from "./utils"

const Modal = ({ visible, onClose, children }) => {
  console.log(children, "children");

  const modalRef = useRef(null);
  const [isClosing, setIsClosing] = useState(false);

  // 处理关闭动画
  const handleClose = () => {
    setIsClosing(true);
    setTimeout(() => {
      setIsClosing(false);
      onClose();
    }, 300);
  };

  // 点击遮罩层关闭
  const handleBackdropClick = (e) => {
    if (e.target === modalRef.current) {
      handleClose();
    }
  };

  // 按ESC键关闭
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === "Escape" && visible) {
        handleClose();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [visible]);

  // 防止滚动穿透
  useEffect(() => {
    if (visible) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
    }

    return () => {
      document.body.style.overflow = "auto";
    };
  }, [visible]);

  if (!visible && !isClosing) return null;

  return (
    <div
      ref={modalRef}
      className={modal-backdrop isClosing ? "closing" : ""}
      onClick={handleBackdropClick}
    >
      <div className={modal-content isClosing ? "closing" : ""}>
        <button className="modal-close" onClick={handleClose} aria-label="关闭">
          ×
        </button>
        <div className="modal-body">{children}</div>
      </div>
    </div>
  );
};

// 示例使用
const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <div className="app-container">
       <CodeDisplayPage code={code} language={"tsx"} />
      <h1>React Modal 组件示例</h1>
      <p>点击下方按钮打开模态框</p>

      <button className="open-modal-btn" onClick={() => setModalVisible(true)}>
        打开 Modal
      </button>

      <div className="features">
        <div className="feature-card">
          <div className="icon">👁️</div>
          <h3>可见性控制</h3>
          <p>通过 visible 属性控制 Modal 的显示与隐藏</p>
        </div>
        <div className="feature-card">
          <div className="icon">🖱️</div>
          <h3>遮罩层关闭</h3>
          <p>点击遮罩层区域可关闭 Modal</p>
        </div>
        <div className="feature-card">
          <div className="icon">🎨</div>
          <h3>内容自定义</h3>
          <p>支持传入任何 React 元素作为内容</p>
        </div>
      </div>

      <Modal visible={modalVisible} onClose={() => setModalVisible(false)}>
        <h2>自定义 Modal 内容</h2>
        <p>这是一个完全可定制的模态框组件。</p>
        <p>你可以在这里放置任何内容：表单、图片、文本等。</p>
        <div className="modal-buttons">
          <button onClick={() => setModalVisible(false)}>取消</button>
          <button className="primary" onClick={() => setModalVisible(false)}>
            确认
          </button>
        </div>
      </Modal>
    </div>
  );
};

export default App;

`;
